<!--
 * @Author: Xujianchen
 * @Date: 2024-07-04 09:37:14
 * @LastEditors: Xujianchen
 * @LastEditTime: 2024-08-13 15:23:02
 * @Description: 账号密码登录
-->
<template>
  <el-form ref="formRef" :model="formData" :rules="rules" size="large">
    <el-form-item prop="username">
      <el-input
        v-model="formData.username"
        placeholder="随便填"
        prefix-icon="User"
      />
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="formData.password"
        type="password"
        placeholder="随便填"
        show-password
        prefix-icon="Lock"
        @keyup.enter="handleLogin"
      />
    </el-form-item>
    <el-form-item prop="code" class="verify-code">
      <el-input
        v-model="formData.imgCode"
        placeholder="请输入验证码"
        prefix-icon="PriceTag"
      >
        <template #append>
          <image-verify-code
            v-model="formData.imgCode"
            style="cursor: pointer"
          />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-row justify="space-between" style="width: 100%">
        <el-col :span="12">
          <el-checkbox v-model="formData.isRemember" label="记住我" />
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-link
            type="danger"
            :underline="false"
            @click="$router.push('/forgetPassword')"
            >忘记密码？</el-link
          >
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width: 100%" @click="handleLogin"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script setup>
import useForm from '@/hooks/useForm'
import useUserStore from '@/store/modules/user'
import ImageVerifyCode from './image-verify-code'

const { formData, formRef } = useForm({
  username: 'admin',
  password: '123456',
  imgCode: '',
  isRemember: true,
})
const { login } = useUserStore()

const rules = {
  username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  imgCode: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
}

async function handleLogin() {
  await formRef.value?.validate()
  const formModel = formData.value
  login({ ...formModel })
}
</script>
